<template>
    <div class="app-container question">
        <div class="search filter-container">
           <span class="label">提问人：</span> <el-input class="inputWidth" v-model="search.userName" placeholder="提问人昵称" clearable></el-input>
           <span class="label">问题类型：</span>
            <el-select v-model="search.questionType" placeholder="问题类型" clearable class="inputWidth">
                <el-option
                v-for="item in questionType"
                :key="item.id"
                :label="item.title"
                :value="item.id">
                </el-option>
            </el-select>
            <span class="label">问题状态：</span>
            <el-select v-model="search.status" placeholder="问题状态" clearable class="inputWidth">
                <el-option
                v-for="item in questionStatus"
                :key="item.id"
                :label="item.label"
                :value="item.id">
                </el-option>
            </el-select>
           <span class="label">创建时间：</span> 
           <el-date-picker 
                v-model="timeRange" 
                type="daterange" 
                align="right" 
                unlink-panels 
                range-separator="-" 
                start-placeholder="提问时间起" 
                end-placeholder="提问时间止" 
                value-format="yyyy-MM-dd HH:mm:ss" 
                :picker-options="pickerOptions"
                clearable
                style="width:255px"
            >
            </el-date-picker>
            <span class="label">用户删除：</span>
            <el-select v-model="search.isDelete" placeholder="用户删除" clearable class="inputWidth">
                <el-option label="全部" :value='null'></el-option>
                <el-option label="是" :value='1'></el-option> 
                <el-option label="否" :value='0'></el-option>
            </el-select>            
            <br/><br/>
            <span class="label">手机号：</span> <el-input class="inputWidth" v-model="search.phone" placeholder="提问人手机" clearable></el-input>
            <span class="label">指定专家：</span>
            <el-select v-model="search.professerId" 
                clearable 
                filterable 
                remote 
                reserve-keyword 
                placeholder="指定专家" 
                :remote-method="getExpertOptions" 
                :loading="isExpertLoading"
                class="inputWidth"
            >
                <el-option v-for="item in expert" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <span class="label">前台显示：</span>
            <el-select v-model="search.isShow" placeholder="前台显示" clearable class="inputWidth">
                <el-option
                v-for="item in isShowList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
                </el-option>
            </el-select>
            <span class="label">热门推荐：</span>
            <el-select v-model="search.recommend" placeholder="热门推荐" clearable style="width:255px">
                <el-option
                v-for="item in recommendList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" @click="searchTable" icon="el-icon-search" style="width:100px;margin-left:20px;">查 询</el-button>
            <el-button type="primary" @click="resetButton" style="width:100px;margin-left:20px;">重 置</el-button>
            <el-button class="filter-item" style="margin-right:40px; float:right;" type="success" icon="el-icon-upload2" @click="handleExportFile">导 出</el-button>
        </div>
        <div class="tableList">
            <el-table 
                :data="tableList" 
                v-loading="tableLoading" element-loading-text="数据加载中，请稍后" 
                border fit highlight-current-row 
            >
                <el-table-column align="center" label="提问人" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.userName }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="联系电话">
                    <template slot-scope="scope">
                        {{scope.row.phone }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="隐私保护">
                    <template slot-scope="scope">
                        {{scope.row.privacy=='0' ? '否' : '是' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="问题类型">
                    <template slot-scope="scope">
                        {{scope.row.questionType}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态">
                    <template slot-scope="scope">
                        {{scope.row.status=="1" ? '有答案' : '无答案'}}
                    </template>
                </el-table-column>                
                <el-table-column align="center" label="用户删除">
                    <template slot-scope="scope">
                        {{scope.row.isDelete=="1" ? '是' : '否'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否前台显示">
                    <template slot-scope="scope">
                        {{scope.row.isShow=="0" ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="热门推荐">
                    <template slot-scope="scope">
                        {{scope.row.recommend==1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="指定专家" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.professorName ? scope.row.professorName : '--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" min-width="120">
                    <template slot-scope="scope">
                        {{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="权重" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editSort(scope.row)">{{scope.row.sort }}</el-button>
                    </template>
                </el-table-column>                
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" round size="small" :class="scope.row.show==true ? 'show' : 'none'" @click="isShow(scope.$index, scope.row)">{{scope.row.isShow=="0" ? '前台隐藏' : '前台显示'}}</el-button>
                        <el-button type="primary" round size="small" @click="expertReply(scope.row)">查看回复</el-button>
                        <el-button type="primary" round size="small" :class="scope.row.show==true ? 'show' : 'none'" @click="isRecommend(scope.$index, scope.row)">{{scope.row.recommend==1 ? '取消' : '推荐'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-show="!tableLoading" class="pagination">
                <el-pagination 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page.sync="search.pageNo" 
                    :page-sizes="[10,20,30,50]" 
                    :page-size="search.pageSize" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog width="54%" title="问答详情" :visible.sync="questionDetailBox" class="popBox" :center="true">
            <div class="ask" v-if="questionDetail">
                <div class="picTop">
                    <div class="userInfo">
                        <span class="photo"><img :src="questionDetail.mgrQuestionVo.avatar" /></span>
                        <span>{{questionDetail.mgrQuestionVo.name}}</span>
                    </div>
                    <div class="time">{{questionDetail.mgrQuestionVo.createtime | dateformat('YYYY-MM-DD HH:mm')}}</div>
                </div>
                <div class="askPic">
                    <span v-for="(item, index) in questionPic" :key="index" @click="clickImg(index)">
                        <img :src="item" />
                    </span>
                    <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
                        <div class="prev" @click.stop="prev" v-if="prevShow"></div>
                        <div class="showImg" >
                            <img class="bigImg" :src="questionPic[num]">
                        </div>
                        <div class="next"  @click.stop="next" v-if="nextShow"></div>
                    </div>
                </div>
                <p>{{questionDetail.mgrQuestionVo.title}}</p>
            </div>
            <div class="questionDetail" v-if="questionDetail && questionDetail.mgrAnswerVoList.length>0">
                <div class="questionOne" v-for="item in questionDetail.mgrAnswerVoList" :key="item.userId">
                    <div class="picTop">
                        <div class="userInfo">
                            <span class="photo"><img :src="item.avatar" /></span>
                            <span>{{item.name}}</span>
                        </div>
                        <div class="time">{{item.createtime | dateformat('YYYY-MM-DD HH:mm')}}</div>
                    </div>
                    <p v-html="item.text"></p>
                    <div class="help">
                        <i><img src="../../assets/help.png" /></i>
                        <span>{{item.helpCount ? item.helpCount : '有帮助'}}</span>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="修改权重" :visible.sync="dialogVisible" width="700px"> 
          <el-form label-width="80px">
            <el-form-item  label="权重值" prop="sort" v-model="sort">
              <div class="block">
                <el-slider v-model="sort" :max="10000" show-input>
                </el-slider>
                <span style="font-size: 12px">(权重值 0 ~ 10000 越高排序越靠前，权重值可以允许重复，重复的权重值依据创建日期排序，越近创建排序在越前)</span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  @click="submitForm">保存</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>
    </div>
</template>

<script>
import { questionType, expertList, isShowQuestion, expert, expertReply, isRecommendQuestion, exportUserInfoExcel, editSort } from '@/api/expert'
import { exportFile } from '@/utils'
export default {
  data(){
    return{
      sort: null,
      id: null,
      search:{
        pageNo: 1,
        pageSize: 10,
        isDelete: null,
        isShow: null,
        recommend: null,
        professerId: null
      },
      timeRange: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      questionType: null,
      questionStatus:[
        {
          label:'无答案',
          id:'0'
        },
        {
          label:'有答案',
          id:'1'
        }
      ],
      isShowList: [{
        label: '全部',
        id: null
      }, {
        label: '是',
        id: '0'
      }, {
        label: '否',
        id: '1'
      }],
      recommendList: [{
        label: '全部',
        id: null
      }, {
        label: '是',
        id: '1'
      }, {
        label: '否',
        id: '0'
      }],
      expert:[],
      tableList: null,
      tableLoading: true,
      total: null,
      isExpertLoading: false,
      questionDetailBox: false,
      dialogVisible: false,
      questionDetail: null,
      questionPic:[],
      showBigImg:false,
      num:0,
      prevShow: false,
      nextShow:false
    }
  },
  mounted(){
    this.askType()
    this.expertList()
  },
  methods:{
    // 修改权重
    editSort(row){
      this.sort = row.sort
      this.id = row.id
      this.dialogVisible = true
    },
    // 保存修改后的权重
    submitForm(){
      const params = {
        id: this.id,
        sort: this.sort
      }
      editSort(params).then(res => {
        if(res.code == 0){
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.expertList()
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
        this.dialogVisible = false
      })
    },
    // 导出列表
    handleExportFile() {
      const { search } = this
      exportUserInfoExcel(search)
        .then(({ data }) => {
          if (data) exportFile(data)
        }).catch(() => {})
    },
    // 问题类型
    askType(){
      questionType().then(response => {
        const { code, data } = response
        if(code == 0){
          this.questionType = data
        }
      })
    },
    //专家列表
    getExpertOptions(title) {
      if (title){
        this.isExpertLoading = true
        expert({ name: title }).then(response => {
          const { code, data } = response
          if(code == 0){
            this.expert = data
            this.isExpertLoading = false
          }
        })
      }
    },
    //专家问答列表
    expertList(){
      this.tableList = []
      this.tableLoading = true
      expertList(this.search).then(response => {
        const { code, data } = response
        if(code == 0){
          this.tableList = data.list
          this.total = data.total
          this.tableLoading = false
          this.tableList.forEach(element => {
            if(element.isDelete == 1){
              element.isShow = 1
              element.recommend = 0
              element['show'] = false
            }else{
              element['show'] = true
            }
          })
        }else{
          this.tableLoading = false
        }
      })
    },
    // 多少条一页
    handleSizeChange(val) {
      this.search.pageSize = val
      this.expertList()
    },
    // 分页
    handleCurrentChange(val) {
      this.search.pageNo = val
      this.expertList()
    },
    //搜素
    searchTable(){
      this.search.pageNo = 1
      this.search.pageSize = 10
      if(this.search.professerId == ''){
        delete this.search.professerId
      }
      if(this.timeRange){
        this.search.startTime = this.timeRange[0]
        this.search.endTime = this.timeRange[1]
      } else {
        delete this.search.startTime
        delete this.search.endTime
      }
      this.expertList()
    },
    //是否前台展示
    isShow(index, param){
      const params = {
        action: param.isShow == 0 ? 1 : 0,
        id: param.id
      }
      isShowQuestion(params).then(response => {
        const { code, data } = response
        if(code == 0){
          this.$message({
            message: param.isShow == 0 ? '前台已隐藏' : '前台已显示',
            type: 'success'
          })
          param.isShow == 0 ? this.tableList[index].isShow = 1 : this.tableList[index].isShow = 0
        }
      })
    },
    //是否推荐
    isRecommend(index, param){
      const params = {
        action: param.recommend == 0 ? 1 : 0,
        id: param.id
      }
      isRecommendQuestion(params).then(response => {
        const { code, data } = response
        if(code == 0){
          this.$message({
            message: param.recommend == 0 ? '已推荐' : '已取消推荐',
            type: 'success'
          })
          param.recommend == 0 ? this.tableList[index].recommend = 1 : this.tableList[index].recommend = 0
        }
      })
    },
    // 专家回复
    expertReply(param){
      this.questionDetail = null
      expertReply({ id: param.id }).then(response => {
        const { code, data } = response
        if(code == 0) {
          this.questionDetailBox = true
          this.questionDetail = data
          this.questionPic = this.questionDetail.mgrQuestionVo.pictures
          if(this.questionPic.length > 1){
            this.nextShow = true
            this.prevShow = true
          }else{
            this.nextShow = false
            this.prevShow = false
          }
        }
      })
    },
    clickImg(index){
      this.showBigImg = true
      this.num = index
      if(index == 0){
        this.prevShow = false
        this.nextShow = true
        if(this.questionPic.length == 1){
          this.nextShow = false
        }
      }else if(index == this.questionPic.length - 1){
        this.nextShow = false
        this.prevShow = true
      }else{
        this.prevShow = true
        this.nextShow = true
      }
    },
    prev(){
      this.nextShow = true
      this.num--
      if(this.num == 0){
        this.prevShow = false
      }else{
        this.prevShow = true
      }
    },
    next(){
      this.prevShow = true
      this.num++
      if(this.num == this.questionPic.length - 1){
        this.nextShow = false
      }else{
        this.nextShow = true
      }
    },
    // 重置搜索内容
    resetButton(){
      this.search.isShow = null
      this.search.professer = null
      this.search.isDelete = null
      this.search.isShow = null
      this.search.recommend = null
      this.search.phone = null
      this.search.questionType = null
      this.search.recommend = null
      this.search.status = null
      this.timeRange = null
      this.search.userName = null
      this.search.pageNo = 1
      this.search.pageSize = 10
      delete this.search.professerId
      delete this.search.phone
      delete this.search.questionType
      delete this.search.status
      delete this.search.userName
    }
  }
}
</script>

<style lang="scss">
    .question{
        .inputWidth{
            width: 168px;
        }
        span.label{
            padding-left: 8px;
            font-size: 14px;
            font-weight: 600;
        }
        .tableList, .pagination{
            padding-top: 30px;
        }
        .el-dialog{
            background: #f4f4f5;
        }
        .ask{
            background: #fff;
            padding: 15px;
            p{
                word-break: break-word;
            }
        }
        .picTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .userInfo{
            display: flex;
            align-items: center;
            .photo{
                width: 41px;
                height: 41px;
                border: 1px solid #f4f4f5;
                border-radius: 50%;
                display: inline-block;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                }
            }
        }
        .askPic{
            width: 80%;
            margin: 0 auto;
            span{
                width: 28%;
                height: 155px;
                margin: 0px 20px;
                display: inline-block;
                overflow: hidden;
                border: 2px solid #f4f4f5;
                img{
                    width: 100%;
                    cursor: pointer;
                }
            }
        }
        .questionDetail{
            background: #fff;
            padding: 0px 15px 15px;
            margin-top: 15px;
            .picTop{
                padding-top: 15px;
                width: 100%;
            }
        }
        .questionOne{
            border-bottom: 1px solid #f4f4f5;
            p{
                word-break: break-word;
            }
        }
        .help{
            text-align: right;
            padding-bottom: 10px;
            i{
                width: 18px;
                height: 18px;
                display: inline-block;
                vertical-align: sub;
                img{
                    width: 100%;
                }
            }
        }
        .imgMask{
            position: fixed;
            height: 100%;
            width:100%;
            top:0;
            left:0;
            z-index: 100;
            background:rgba(0,0,0,.6); 
        }
        .showImg{
            position: absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            border:10px solid #fff;
        }
        .bigImg{
            max-height: 700px;
        }
        .prev{
            position: absolute;
            top:50%;
            left:10%;
            width:0;
            height:0;
            border-width:15px 15px 15px 0;
            border-style:solid;
            border-color:transparent #fff transparent transparent;/*透明 灰 透明 透明 */
            margin:40px auto;
            cursor: pointer;
        }
        .next{
            position: absolute;
            top:50%;
            right:10%;
            width:0;
            height:0;
            border-width:15px 0 15px 15px;
            border-style:solid;
            border-color:transparent transparent transparent #fff;/*透明 透明 透明 灰*/
            margin:40px auto;
            cursor: pointer;
        }
        .none{
            visibility : hidden;
        }
    }
</style>
